<script setup lang="ts">
import { ref, watch } from "vue";
import { ElCard, ElText } from "element-plus";

import Echart from "./Echart.vue";
import { THomeChart } from "@/global";

const props = defineProps<{
  data?: THomeChart["goods_rank"];
}>();

const options = ref<Record<string, any>>({
  tooltip: {
    show: false,
    trigger: "item",
  },

  legend: {
    top: "5%",
    left: "center",
    show: false,
  },

  series: [
    {
      name: "goodsRank",
      type: "pie",
      radius: ["60%", "95%"],
      avoidLabelOverlap: false,
      padAngle: 2,
      itemStyle: {
        borderRadius: 5,
        borderWidth: 0,
      },
      label: {
        show: true,
        rotate: true,
        position: "inside",
        formatter: `{c}%`,
      },
      emphasis: {
        // focus: "self",
        // scaleSize: 10,
        label: {
          show: true,
          fontSize: 20,
          fontWeight: "bold",
          textAlign: "center",
          rotate: false,
        },
        itemStyle: {
          borderDashOffset: 10,
          shadowBlur: {
            shadowBlur: 100,
          },
        },
      },
      labelLine: {
        show: false,
      },
      // data,
    },
  ],
});

watch(
  () => props.data,
  (data) => {
    if (data) {
      const total = data?.reduce((sum, item) => {
        return sum + item.num;
      }, 0 as number);

      options.value = {
        graphic: [
          {
            type: "text",
            left: "center",
            top: "43%",
            style: {
              text: total,
              textAlign: "center",
              fill: "#000",
              fontWeight: "bold",
              fontSize: 40,
            },
          },
          {
            type: "text",
            left: "center",
            top: "57%",
            style: {
              text: "总收藏次数",
              textAlign: "center",
              fill: "#999",
              fontSize: 16,
            },
          },
        ],

        series: [
          {
            name: "goodsRank",
            data,
          },
        ],
      };
    }
  }
);

const colors = ref<string[]>([]);
const handleInit = (ins: any) => {
  colors.value = ins.getOption().color as string[];
};
</script>
<template>
  <ElCard>
    <template #header>
      <div class="mb-2">统计占比</div>
      <div class="text-lg font-bold">单品收藏排行</div>
    </template>

    <Echart class="w-full h-[360px]" :options="options" @init="handleInit" />

    <div class="max-w-[240px] mx-auto">
      <template v-for="(item, index) in data" :key="index">
        <div class="flex items-center my-3 px-3">
          <span
            class="mr-2 w-[10px] h-[10px] rounded-full"
            :style="{ background: colors[index] }"
          />
          <div class="flex-auto w-[50%]">
            <ElText truncated>{{ item.goods_name }}</ElText>
          </div>
          <div class="flex-none text-sm ml-3">{{ item.num }}</div>
        </div>
      </template>
    </div>
  </ElCard>
</template>
